<!--密码找回-->
<template lang="pug">
  kalix-master
    div.PersonalCenter
      div.bgc
        img(src="/static/PersonalCenter/背景图_u3060.jpg")
      div.personal
        div.personal-right
          div.center
            div.email
              div.email-son
                span.emailText 邮箱 :
                input.Theinput(v-model="email" text="email" )
              div.emailBor 请输入注册时所填写的邮箱，新密码将发送至邮箱
              router-link(v-bind:to="{name:''}")
                div.tijiao(@click="getSend" :plain="true") 提交
</template>

<script type="text/ecmascript-6">
  import {loginUrl} from '../../config/global.toml'
  import Message from '../../common/message'

  export default {
    data() {
      return {
        uid: '',
        username: '',
        userIcon: '',
        email: this.email,
        // email: '',
        acc: ''
      }
    },
    mounted() {
      this.uid = this.$KalixCatch.get('id')
      this.username = this.$KalixCatch.get('user_name')
      this.getHeadImg(this.uid)
      this.getToken()
    },
    methods: {
      getToken() {
        let _data = {
          'username': 'admin',
          'password': '123'
        }
        this.$http.request({
          method: 'POST',
          url: loginUrl,
          transformRequest: [(data) => {
            // Do whatever you want to transform the data
            let ret = ''
            for (let it in data) {
              ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
            }
            return ret
          }],
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          data: _data
        }).then(res => {
          this.acc = res.data.access_token
        }).catch(err => {
          console.log('err', err)
        })
      },
      getHeadImg(id) {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/users/' + `${id}`,
          headers: {
            access_token: this.acc
          }
        }).then(res => {
          this.userIcon = res.data.data[0].icon
        })
      },
      getSend() {
        this.sendEmail()
        this.axios.request({
          method: 'GET',
          url: 'camel/rest/training/course/getEmail',
          params: {
            email: this.email
          },
          headers: {
            access_token: this.acc
          }
        }).then(resp => {
          if (this.email.length === 0) {
            this.sendEmail()
            return false
          } else {
            let date = JSON.parse(resp.data)
            if (date.flag === '1') {
              Message.success('发送成功')
            } else if (date.flag === '2') {
              Message.error('发送失败')
            } else if (date.flag === '3') {
              Message.error('邮箱错误')
            } else {
              console.log('else')
            }
          }
        })
      },
      // 邮箱验证
      sendEmail() { // 邮箱正则
        var regEmail = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
        if (this.email === '') {
          Message.warning(`请输入邮箱`)
        } else if (!regEmail.test(this.email)) {
          Message.warning(`请输入正确邮箱`)
        }
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .bgc
    width 100%
    height 327px
    position absolute
    top 100px
    z-index -1

  .bgc img
    width 100%
    height 100%

  .personal
    width 1200px
    height 718px
    /*background-color: green*/
    background-color: #fff
    margin 0 auto
    margin-top 186px
    position relative
    border-radius 5px
    box-shadow 4px 4px 6px #ccc

  .personal-right
    width 80%
    height 100%
    float right

  .center
    width 905px
    height 520px
    border 1px solid #ccc
    border-radius 5px
    margin-top 54px

  .email
    width 350px
    height 150px
    margin 138px auto

  .emailText
    font-size 18px

  .Theinput
    width 250px
    height 30px
    border 1px solid #ccc
    margin-left 10px

  .emailBor
    color #ccc
    font-size 12px
    margin-left 56px
    margin-top 10px

  .tijiao
    width 80px
    height 35px
    background-color: #008F95
    color: #fff
    text-align center
    line-height 35px
    margin-left 110px
    margin-top 24px
    border-radius 5px
    cursor pointer
</style>
